// 头部组件
import react, { useState } from 'react'

import Link from 'next/link'
import { withRouter } from 'next/router'

import { Row, Col, Button } from 'antd'
import  { MenuOutlined } from '@ant-design/icons'
import '../../styles/api/header.scss'
import NavDrawer from '../api/NavDrawer'


function Header ({router}) {
  const [visible, setVisible] = useState(false);

  const onClose = () => {
    setVisible(false);
  };

  // 点击汉堡按钮, 把 抽屉 的显示和隐藏的数据，搬到 header 组件中
  // 然后，点击汉堡按钮，把数据改成 显示的就可以了，然后再把数据
  // 传递到 抽屉组件 中，来控制组件的显示和隐藏 。
  const leftDrawer = () => {
    setVisible(true);
  }

  return (
    <div className="header-content">
      {/* 正常行，lg 就让头部消失*/}
      <Row className="full">
        {/* logo */}
        <Col xs={0} sm={0} lg={0} xl={6}>
          <div className="logo-text"> Mu To</div>
        </Col>
        {/* nav */}
        <Col xs={0} sm={0} lg={0} xl={12} className="nav">
          <ul>
            <li className={router.query.index == 1 ? 'active' : ''}>
              <Link href="/?index=1">首页</Link>
            </li>
            <li className={router.query.index == 2 ? 'active' : ''}>
              <Link href="/article?index=2">文章</Link>
            </li>
            <li className={router.query.index == 3 ? 'active' : ''}>
              生活
            </li>
          </ul>
        </Col>
        {/* 操作 */}
        <Col xs={0} sm={0} lg={0} xl={6}>
          <div className="operation">
            {/* 切换模式 */}
            <i className="iconfont">&#xe60d;</i>
            {/* 用户头像 */}
            {/* <div className="user-img"></div> */}
            <Button type="primary" shape="circle" className="user-img" onClick={() => { props.onClickLogin() }}>
              登录
            </Button>
          </div>
        </Col>
      </Row>
      {/* 汉堡按钮行 */}
      <Row className="hamburger">
        <Col xl={0} className="logo-text">
          <div>Mu To</div>
        </Col>
        <Col xl={0} className="menu-outlined">
          <i>
            <MenuOutlined onClick={leftDrawer} />
          </i>
        </Col>
      </Row>
      {/* 抽屉组件 */}
      <NavDrawer onClose={onClose} visible={visible}/>
    </div>
  )
}

export default withRouter(Header)
